<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>${message("admin.attribute.list")}</title>


<link href="${base}/resources/admin/css/amazeui.css" rel="stylesheet" type="text/css" /><link href="${base}/resources/admin/css/common.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="${base}/resources/admin/ztree/demo.css" type="text/css"/>
<link rel="stylesheet" href="${base}/resources/admin/ztree/zTreeStyle/zTreeStyle.css" type="text/css"/>
<link rel="stylesheet" href="${base}/resources/admin/ztree/metroStyle/metroStyle.css" type="text/css"/>
<script type="text/javascript" src="${base}/resources/admin/js/jquery.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/common.js"></script>
<script type="text/javascript" src="${base}/resources/admin/js/list.js"></script> <script type="text/javascript" src="${base}/resources/admin/js/amazeui.min.js"></script>
<script type="text/javascript" src="${base}/resources/admin/ztree/jquery.ztree.all-3.5.min.js"></script>

<script type="text/javascript">
	$().ready(function() {
		initTree("tree1");
		
	});
	
	
	
	function initTree(treeId,paramId){
		var zNodes = null;
		var url = null;
		var paramData = "";
		if(treeId=="tree1"){
			url = "${base}/asl-admin/attribute/productCategoryTree.htm";
		}else if(treeId =="tree2"){
			url = "${base}/asl-admin/attribute/attributeTree.htm";
			paramData = "categoryId="+paramId;
		}else{
			url = "${base}/asl-admin/attribute/attributeOptionTree.htm";
			paramData = "attributeId="+paramId;
		}
		
		$.ajax({
		   type: "GET",
		   url: url,
		   dataType:"json",
		   data: paramId==null||paramId==undefined?"":paramData,
		   success: function(data){
		    zNodes = data;
			var t = $("#"+treeId);
			t = $.fn.zTree.init(t, getSetting(treeId), zNodes);
			var zTree = $.fn.zTree.getZTreeObj(treeId);
			
			if(zNodes!=null && zNodes.length>1){
				zTree.selectNode(zTree.getNodeByParam("id", zNodes[1]["id"]));
				
			}
			else{
				zTree.selectNode(zTree.getNodeByParam("id", 1));
			}
		   }
		});
		
	}
	
	function getSetting(treeId){
		var setting = {
			view: {
				addHoverDom: addHoverDom,
				removeHoverDom: removeHoverDom,
				dblClickExpand: false,
				showLine: false,
				selectedMulti: false
			},
			edit: {
					enable: true,
					editNameSelectAll: true,
					showRemoveBtn: showRemoveBtn,
					showRenameBtn: false
				},
			data: {
				simpleData: {
					enable:true,
					idKey: "id",
					pIdKey: "pId",
					rootPId: ""
				}
			},
			callback: {
				onClick : function(event,treeId, treeNode) {
					var zTree = $.fn.zTree.getZTreeObj(treeId);
					var paramId = treeNode.id;
					if (paramId == 1) {
						zTree.expandNode(treeNode);
						return false;
					}else{
						if(treeId=="tree1"){
							currPId = paramId;
							initTree("tree2",paramId)
						}else if(treeId=="tree2"){
							currAId = paramId;
							initTree("tree3",paramId)
						}
						else{
							return false;
						}
						
					} 
				},
				onRename:onRename,
				beforeRename:editNode,
				beforeRemove:beforeRemove
			}
		};
		return setting;
	}
	function showRemoveBtn(treeId, treeNode) {
		if(treeNode.id==1){
			return false;
		}else{
			return true;
		}
		//return !treeNode.isFirstNode;
	}
	function showRenameBtn(treeId, treeNode) {
		if(treeNode.id==1){
			return false;
		}else{
			return true;
		}
		//return !treeNode.isLastNode;
	}
	function addHoverDom(treeId, treeNode) {
			if(treeNode.id!=1 || treeId == "tree1"){
				return false;
			}
			var sObj = $("#" + treeNode.tId + "_span");
			if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tId).length>0) return;
			var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
				+ "' title='add node' style='background-position: -145px -1px;' onfocus='this.blur();'></span>";
			sObj.after(addStr);
			var btn = $("#addBtn_"+treeNode.tId);
			if (btn) btn.bind("click", function(){
				addNode(treeId, treeNode);
				return false;
			});
		};
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};
	
	function addNode(treeId, treeNode){
		var zTree = $.fn.zTree.getZTreeObj(treeId);
		zTree.addNodes(treeNode, {id:-1, pId:treeNode.id, name:"新节点"});
	}
	var currPId ;
	var currAId ;
	
	function editNode(treeId, treeNode, newName, isCancel){
		var zTree = $.fn.zTree.getZTreeObj(treeId);
		var url = null;
		var paramData  = "paramId="+treeNode.id+"&name="+treeNode.name+"&newName="+newName;
		if(treeId=="tree1"){
			url = "${base}/asl-admin/attribute/editProductCategoryName.htm";
		}else if(treeId =="tree2"){
			url = "${base}/asl-admin/attribute/editAttributeName.htm";
			paramData  = paramData + "&productCategoryId=" +currPId;
		}else{
			url = "${base}/asl-admin/attribute/editAttributeOptionName.htm";
			paramData  = paramData + "&attributeId=" +currAId;
		}
		var result = false;
		$.ajax({
		   type: "POST",
		   url: url,
		   dataType:"json",
		   data: paramData,
		   async:false,//必须false
		   success: function(data){
		   		if(data["status"]=="OK"){
		   			result = true;
		   			return;
		   		}else{
		   			alert(data["msg"]);
		   			result = false;
		   			return result;
		   		}
		   },
		   error:function(data){
			   alert("请求失败，请稍后再试");
   			   result = false;
   			   return result;
		   }
		});
		return result;
	}
	
	function onRename(event, treeId, treeNode, isCancel) {
		if(treeNode.id<0){
			if(treeId == "tree2"){
					initTree("tree2",currPId);
			}else if(treeId == "tree3"){
				initTree("tree3",currAId);
			}
		}
		
	}
	
	function beforeRemove(treeId, treeNode){
		var zTree = $.fn.zTree.getZTreeObj(treeId);
		var id = treeNode.id;
		if(id!=-1){
			var url = null;
			var paramId = treeNode.id;
			if(treeId=="tree3"){
				 paramId = currAId;
			}
			var paramData  = "paramId="+paramId+"&name="+treeNode.name;
			if(treeId=="tree1"){
				url = "${base}/asl-admin/attribute/removeProductCategory.htm";
			}else if(treeId =="tree2"){
				url = "${base}/asl-admin/attribute/removeAttribute.htm";
			}else{
				url = "${base}/asl-admin/attribute/removeAttributeOption.htm";
			}
			var result = false;
			$.ajax({
			   type: "POST",
			   url: url,
			   dataType:"json",
			   data: paramData,
			   async:false,//必须false
			   success: function(data){
			   		if(data["status"]=="OK"){
			   			result = true;
			   			return;
			   		}else{
			   			alert(data["msg"]);
			   			result = false;
			   			return result;
			   		}
			   },
			   error:function(data){
				   alert("请求失败，请稍后再试");
	   			   result = false;
	   			   return result;
			   }
			});
			return result;
		}
	}
</script>
</head>
<body>
	<div class="path">
		<a href="${base}/asl-admin/common/index.htm">${message("admin.path.index")}</a> &raquo; ${message("admin.attribute.list")} <span></span>
	</div>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul id="tree1" class="ztree"></ul>
		</div>
		<div class="center">
			<ul id="tree2" class="ztree"></ul>
		</div>
		<div class="right">
			<ul id="tree3" class="ztree"></ul>
		</div>
	</div>
	
</body>
</html>